<template>
  <AppPage :show-footer="true">
    <div flex-1>
      <div flex class="screen">
        <!--  -->
        <n-card rounded-10>
          <n-descriptions label-placement="top" :column="4">
            <n-descriptions-item>
              姓名：{{ state?.data?.patient?.name_patient||"" }}
            </n-descriptions-item>
            <n-descriptions-item>
              年龄：{{ state?.data?.patient?.age_patient||"" }}
            </n-descriptions-item>
            <n-descriptions-item>
              性别：{{ (state?.data?.patient?.sex_patient==1?"男":"女")||"" }}
            </n-descriptions-item>
            <n-descriptions-item>
              身高：{{ state?.data?.patient?.height_patient||""  }} (cm) </n-descriptions-item>
            <n-descriptions-item>
              体重：{{ state?.data?.patient?.weight_patient||""  }} (kg)
            </n-descriptions-item>
            <n-descriptions-item>
              出生日期：{{state?.data?.patient?.birth_patient||""   }}
            </n-descriptions-item>
            <n-descriptions-item>
              手机号：{{ state?.data?.patient?.phone_patient||"" }}
            </n-descriptions-item> <n-descriptions-item>
              就诊时间：{{ state?.data?.time_registration||"" }}
            </n-descriptions-item>
          </n-descriptions>
        </n-card>

      </div>

      <n-card rounded-10 mt-15>
        <n-tabs type="segment">
          <n-tab-pane name="chap1" tab="病情主诉">
            病情主诉

            <n-form ref="formRef" :model="model" :rules="rules" :size="size" label-placement="left" label-width="auto">
              <n-grid :cols="24" :x-gap="24">
                <n-form-item-gi :span="12" label="婚姻状况" path="marriage">
                  <n-select v-model:value="model.marriage_case" placeholder="请选择 婚姻状况" :options="marriage" />
                </n-form-item-gi>

                <n-form-item-gi :span="12" label="身高(cm)" path="stature">
                  <n-input-number v-model:value="model.height_patient" placeholder="请选择 身高" />
                </n-form-item-gi>

                <n-form-item-gi :span="12" label="生育情况" path="bear">
                  <n-select v-model:value="model.fertility_case" placeholder="请选择 生育情况" :options="bear" />
                </n-form-item-gi>

                <n-form-item-gi :span="12" label="体重(kg)" path="weight">
                  <n-input-number v-model:value="model.weight_patient" placeholder="请选择 体重" />
                </n-form-item-gi>

                <n-form-item-gi :span="12" label="最后一次用餐时间" path="meal">
                  <n-select v-model:value="model.meal_case" placeholder="请选择 最后一次用餐时间" :options="meal" />
                </n-form-item-gi>

                <n-form-item-gi :span="12" label="体温(℃)" path="temperature">
                  <n-input-number v-model:value="model.temperature_case" placeholder="请选择 体温" />
                </n-form-item-gi>

                <n-form-item-gi :span="20" label="既往史" path="previous_history">
                  <n-input v-model:value="model.previous_history" placeholder="行程码、健康码均为绿码，否认14天内病例报告、社区旅行史或居住史，否认14天内国外入境，否认14天内与新冠病毒感染者或无症状，感染者有接触史。否认14天内有明确接触过来自病例报告社区的发热或有呼吸道症状的患者，否认有聚集性发病，否认明确的活禽类、野生动物接触史，否认近期从事冷链行业等高危职业。否认14天内有中、高风险地区旅游史。" type="textarea" :autosize="{
                  minRows: 3,
                  maxRows: 5
                }" />
                </n-form-item-gi>

                <n-form-item-gi :span="20" label="主诉" path="self_reported">
                  <n-input v-model:value="model.main_suit" placeholder="请输入 主诉" type="textarea" :autosize="{
                  minRows: 3,
                  maxRows: 5
                }" />
                </n-form-item-gi>

                <n-form-item-gi>
                  <n-button round type="primary" @click="save_self_reported">
                    提交
                  </n-button>
                </n-form-item-gi>
              </n-grid>
            </n-form>

          </n-tab-pane>
          <n-tab-pane name="chap2" tab="诊断开药">
            <n-divider title-placement="left">
              开药及诊疗
            </n-divider>
            <n-dynamic-input v-model:value="diagnostic.prescribing_diagnostic" preset="pair" key-placeholder="药名" value-placeholder="药量" />

            <n-divider title-placement="left">
              说明以医嘱
            </n-divider>
            <n-input v-model:value="diagnostic.physician_order_diagnostic" placeholder="说明以医嘱" type="textarea" :autosize="{
              minRows: 3,
              maxRows: 5
            }" />

            <div mt-15 style="display: flex; justify-content: flex-end">
              <n-button round type="primary" @click="save_diagnostic">
                提交
              </n-button>
            </div>
          </n-tab-pane>

          <n-tab-pane name="chap3" tab="患者回访">
            <n-divider title-placement="left">
              回访内容
            </n-divider>

            <n-form ref="patient_visit" :model="patient_visit_model" :rules="patient_visit_rules" label-placement="left" label-width="auto" require-mark-placement="right-hanging" :size="size">
              <n-form-item label="病情状况" path="medical">
                <n-input v-model:value="patient_visit_model.illness_callback" placeholder="请输入 病情状况" />
              </n-form-item>

              <n-form-item label="用药效果" path="result">
                <n-input v-model:value="patient_visit_model.medication_callback" placeholder="请输入 用药效果" />
              </n-form-item>

              <n-form-item label="用药指导" path="result">
                <n-input v-model:value="patient_visit_model.direction_medication_callback" placeholder="请输入 用药指导" />
              </n-form-item>

              <n-form-item label="生活指导" path="result">
                <n-input v-model:value="patient_visit_model.direction_live_callback" placeholder="请输入 生活指导" />
              </n-form-item>

              <div style="display: flex; justify-content: flex-end">
                <n-button round type="primary" @click="save_patient_visit">
                  提交
                </n-button>
              </div>
            </n-form>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
import api from "../api.js";
const userStore = useUserStore()
const route = useRoute()
const state = reactive({
  data: null
})
// 开药
const diagnostic = reactive({
  // 病例ID
  id_case: null,
  // 开药
  prescribing_diagnostic: [
    {
      key: "",
      value: ""
    }, {
      key: "",
      value: ""
    }, {
      key: "",
      value: ""
    }
  ],
  // 医嘱
  physician_order_diagnostic: ""
})
const formRef = ref(null);
const size = ref("medium")
const model = ref({
  // 病例ID
  id_case: null,
  // 婚姻状况
  marriage_case: null,
  // 身高
  height_patient: null,
  // 生育
  fertility_case: null,
  // 体重
  weight_patient: null,
  // 最后一次用餐时间
  meal_case: null,
  // 体温
  temperature_case: null,
  // 既往史
  previous_history: null,
  // 主诉
  main_suit: null,
  // 就诊人ID
  id_patient: null
})
// 婚姻选择
const marriage = ["未婚", "已婚", "离异", "丧偶"].map(
  (v) => ({
    label: v,
    value: v
  })
)
// 生育选择
const bear = ["已育", "未育"].map(
  (v) => ({
    label: v,
    value: v
  })
)
// 最后一次用餐情况
const meal = ["1小时前", "2小时前", "4小时前", "8小时前",].map(
  (v) => ({
    label: v,
    value: v
  })
)
const rules = {
  marriage: {
    trigger: ["blur", "change"],
    message: "请选择 婚姻状况"
  },
  stature: {
    type: 'number',
    trigger: ['blur', 'change'],
    message: '请输入 身高'
  },
  bear: {
    trigger: ["blur", "change"],
    message: "请选择 生育情况"
  },
  weight: {
    type: 'number',
    trigger: ['blur', 'change'],
    message: '请输入 体重'
  },
  meal: {
    trigger: ["blur", "change"],
    message: "请选择 生育情况"
  },
  temperature: {
    type: 'number',
    trigger: ['blur', 'change'],
    message: '请输入 体温'
  },
  previous_history: {
    trigger: ["blur", "input"],
    message: "请输入 既往史"
  },
  self_reported: {
    trigger: ["blur", "input"],
    message: "请输入 主诉"
  },
}
const patient_visit = ref(null);
const patient_visit_model = ref({
  // 病例ID
  id_case: null,
  // 病情状况
  illness_callback: null,
  // 用药效果
  medication_callback: null,
  // 用药指导
  direction_medication_callback: null,
  // 生活指导
  direction_live_callback: null
})
const patient_visit_rules = {
  // 病情状况
  medical: {
    trigger: ['blur', 'input'],
    message: '请输入 病情状况'
  },
  // 用药效果
  result: {
    trigger: ['blur', 'input'],
    message: '请输入 用药效果'
  },
  // 用药指导
  direction: {
    trigger: ['blur', 'input'],
    message: '请输入 用药效果'
  },
  // 用药指导
  direction_life: {
    trigger: ['blur', 'input'],
    message: '请输入 生活指导'
  }
}
async function getData () {
  const { data } = await api.findOneByIdRegistration({ id: route.query.id })
  // 数据赋值
  state.data = data
  model.value.id_case = data.id_case
  model.value.marriage_case = data.case.marriage_case
  model.value.fertility_case = data.case.fertility_case
  model.value.meal_case = data.case.meal_case
  model.value.main_suit = data.case.main_suit
  model.value.temperature_case = data.case.temperature_case
  model.value.previous_history = data.case.previous_history
  model.value.weight_patient = data.patient.weight_patient
  model.value.height_patient = data.patient.height_patient
  model.value.id_patient = data.id_patient

  // 诊断模块赋值
  data.case.prescribing_diagnostic ? diagnostic.prescribing_diagnostic = JSON.parse(data.case.prescribing_diagnostic) : ""
  diagnostic.physician_order_diagnostic = data.case.physician_order_diagnostic
  diagnostic.id_case = data.case.id_case

  // 患者回访
  patient_visit_model.value.id_case = data.case.id_case
  patient_visit_model.value.illness_callback = data.case.illness_callback
  patient_visit_model.value.medication_callback = data.case.medication_callback
  patient_visit_model.value.direction_medication_callback = data.case.direction_medication_callback
  patient_visit_model.value.direction_live_callback = data.case.direction_live_callback


  console.log(model.value, "model.value");
  console.log(data, "data");
}
// 保存病情主诉
const save_self_reported = () => {
  // 业务
  api.updataCase({ data: model.value }).then((res) => {
    console.log(res);
    if (res.code == 0) {
      message.success("保存成功")
    } else {
      message.error("保存错误")
    }
  })
}
// 保存诊断开药
const save_diagnostic = () => {
  // 业务
  api.updataCaseDiagnostic({ data: diagnostic }).then((res) => {
    if (res.code == 0 && res.data) {
      message.success("保存成功")
    } else {
      message.error("保存失败")
    }
  })
}



// 保存患者回访
const save_patient_visit = () => {
  // 业务
  api.updataCaseVisit({ data: patient_visit_model.value }).then((res) => {
    // console.log(res, "保存诊断开药");
    if (res.code == 0 && res.data) {
      message.success("保存成功")
    } else {
      message.error("保存失败")
    }
  })
}

//初始挂载
onMounted(() => {
  getData()
})
</script>


<style lang="scss" scoped>
.detail_top {
  display: flex;
  justify-content: space-between;
}
.divider {
  border: 0.5px solid #efeff5;
}
</style>
